<template>
  <view>
    <view class="safe-area-inset-bottom" style="height: 120rpx"> </view>
    <view v-for="(item, index, key) in data" :key="key">
      <view
        class="tabbarModule flex aitems jcenter"
        :style="{
          background: `${item.footerbgColor}`,
        }"
        v-if="item.name == 'page'"
      >
        <view
          class="tabbarOptions flex aitems jcenter"
          v-for="(items, indexs) in item.value"
          :key="'tabbarOptions' + indexs"
          @click="tabbarChange(items)"
        >
          <image
            :src="`${indexs == activeIndex ? items.selectIcon : items.icon}`"
            class="icon"
            mode=""
          ></image>
          <view
            class="tabbar name"
            :style="{
              color: `${indexs == activeIndex ? item.selectColor : ''}`,
            }"
          >
            {{ items.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStorage } from "@/utils/storage.js";
import { navigateTo } from "@/utils/navigateTo";
export default {
  props: {
    path: {
      default: "",
    },
    list: {
      type: Array,
      default: [],
      value: [],
    },
  },
  name: "tabbar",
  data() {
    return {
      data: [],
      activeIndex: null,
    };
  },
  watch: {
    list(data) {
      if (data) {
        if (data.length !== 0) {
          data.map((item) => {
            if (item.name == "page") {
              item.value.map((items, indexs) => {
                console.log(this.path == items.path + items.params);
                if (this.path == items.path + items.params) {
                  this.activeIndex = indexs;
                }
              });
            }
          });
          this.data = data;
        }
      }
    },
  },
  onload() {},
  mounted() {
    if (this.list.length == 0) {
      setTimeout(() => {
        console.log("-----------CustomTabBar----------");
        let data = getStorage("customData");
        if (Array.isArray(data)) {
          data.map((item) => {
            if (item.name == "page") {
              item.value.map((items, indexs) => {
                if (this.path == items.path) {
                  this.activeIndex = indexs;
                }
              });
            }
          });
          this.data = data;
        }
      }, 500);
    }
  },
  methods: {
    tabbarChange(item) {
      navigateTo(item);
    },
  },
};
</script>

<style scoped lang="scss">
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbarModule {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100%;
  background: #fff;

  .tabbarOptions {
    height: 100rpx;
    flex: 1;
    margin: 0 auto;
    text-align: center;
    flex-direction: column;
  }

  .icon {
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;
  }

  .name {
    font-size: 24rpx;
  }
}
</style>
